<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>测试图片上传</title>
	<script th:src="@{/static/js/jquery.min.js}"></script>
	<script th:src="@{/static/js/ajaxfileupload.js}"></script>
	<script th:src="@{/static/js/vue.js}"></script>
<script  th:src="@{/static/js/element.js}"></script>
</head>
	<body>
		<div id="app">
			<div id="showpic"></div>
			<input type="file" name="file" id="uploadFile" accept="image/jpg,image/jpeg,image/bmp,image/png" onchange="uploadImage()">
			<a  v-on:click="remove" class="btn btn-default">删除</a>
			<div id="showpic1">111</div>
			<div id="showpic2">111</div>
		</div>
	</body>
<script type="text/javascript" th:inline="javascript">
var fullPath="group1/M00/00/03/wKgB5FrhyB-Ae-SEAAzodQCbVVc008.jpg";
var vm = new Vue({
	el : "#app",
	data : {
		
	},
	methods:{
		remove:function(){
			//$("#showpic1").html("<image src='/fastdfs/file/getFile?fullPath="+fullPath+"'>");
			 $.post("/fastdfs/file/deleteFile",
				    	{"fullPath":fullPath},
					    function(data) {	
				    		//$("#showpic2").html("<image src='/fastdfs/file/getFile?fullPath="+fullPath+"'>");
					    }
					);
			
		}
	}
});
//上传文件
function uploadImage(){
		$.ajaxFileUpload({
		url: '/fastdfs/file/uploadFile', //用于文件上传的服务器端请求地址
		secureuri: false, //是否需要安全协议，一般设置为false
		fileElementId: "uploadFile", //文件上传域的ID
		dataType: 'text', //返回值类型 一般设置为json
		success: function (data){ 
			var obj = eval('(' + data + ')');
			if(obj.returnCode){
        		$("#showpic").html("<image src='/fastdfs/file/getFile?fullPath="+obj.fullPath+"'>");
        		//$("#showpic1").html("<image src='"+obj.fdfsIpPre+obj.fullPath+"'>");
            }
	},
    error: function (data){
    	alert("上传失败！");//服务器响应失败处理函数            
    }
	})
	return false;
}
</script>	
</html>
